<template>
  <div class="book">
    <table>
      <tr>
        <td>编号</td>
        <td>图书名称</td>
        <td>作者</td>
      </tr>
      <tr v-for="(item,index) in books" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.author}}</td>
      </tr>
    </table>

<!-- 
  vue ui

  vue add axios


  后端:
  http://localhost:8181/book/getAll


  前端:
  http://192.168.0.104:8080/book
   -->
  </div>
</template>

<script>
export default {
  name: 'Book',
  data(){
    return{
      msg: "book!!!!!",
      books:[
        {
        id: 1,
        name: 'spark 深入浅出',
        author: '王聪'
      },
      {
        id: 2,
        name: 'flink 深入浅出',
        author: '图灵'
      },
      {
        id: 3,
        name: 'dataX 深入浅出',
        author: '利纳斯'
      }
      ]
    }
  },
  created(){
    const _this = this
    axios.get('http://localhost:8181/book/getAll').then(function(resp){
      _this.books = resp.data
      // console.log(resp)
    })
    // alert(123)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
